<template>
  <div class="rate-contail">
    <van-nav-bar class="header"
                 title="物业评价"
                 left-arrow
                 @click-left="goBack()" />
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <div class="fengniao-tip"
           v-if="tip">暂时没有数据</div>
      <van-list v-model="loading"
                :finished="finished"
                @load="onLoad">
        <div class="list">
          <div class="item"
               v-for="(item,index) in list"
               :key="index">
            <div class="img">
              <img v-lazy="item.avatar===null?'/static/img/avatr.jpeg':`${imagesUrl}/${item.avatar}`"
                   alt=" ">
            </div>
            <div class="info">
              <p class="title"
                 v-text="item.realname"></p>
              <p class="text"
                 v-text="item.duty"></p>
              <div class="menu">
                <el-button size="mini"
                           type="primary"
                           class="btn"
                           @click.stop="star(item,index)">
                  <span>点赞</span>
                </el-button>
                <el-button size="mini"
                           class="btn"
                           @click.stop="detail(item,index)">
                  <span>评价</span>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>

    </van-pull-refresh>
    <el-dialog title="评语"
               :visible.sync="box"
               width="100%">
      <span slot="footer"
            class="dialog-footer">
        <div class="form-items">
          <van-field type="textarea"
                     placeholder="请输入用户评语"
                     rows="6"
                     autosize
                     v-model="form.comment"
                     class="form-item textarea" />
        </div>
        <el-button type="primary"
                   @click="submit"
                   size="small">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { validatenull } from '@/util/validate';
import { mapGetters } from 'vuex';
import baseCommon from '@/mixins/common.js';
import { getList, star } from '@/api/rate/';
import { asyncValidator } from '@/util/validate';

export default {
  name: 'rate',
  mixins: [baseCommon()],
  data() {
    return {
      rules: {
        comment: { type: 'string', required: true, message: '请输入用户评语' },
      },
      form: {
        propertyUserId: '',
        assessUser: '', // 评价人
        comment: '', // 评语
        communityId: '',
        unitId: '',
        houseId: '',
        buildingId: '',
      },
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      tip: false,
      box: false,
      obj: {},
      page: {
        total: 0,
        type: 1,
        communityId: undefined,
        page: 1,
        limit: 10,
      },
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'community']),
  },
  created() {
    this.page.communityId = this.community.communityId;
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.form.assessUser = this.userInfo.ownerId;
      this.form.communityId = this.userInfo.communityId;
      this.form.unitId = this.userInfo.unitId;
      this.form.houseId = this.userInfo.houseId;
      this.form.buildingId = this.userInfo.buildingId;
    },
    submit() {
      asyncValidator(this.rules, this.form).then(() => star(this.form, 2)).then(() => {
        this.form.comment = '';
        this.box = false;
        this.$message.success({
          message: '提交成功，感谢您的评语',
          duration: 1500,
        });
      }).catch((errors) => {
        this.$message.warning({
          message: errors[0].message,
          duration: 1500,
        });
      });
    },
    star(item) {
      this.form.propertyUserId = item.userId;
      star(this.form, 1).then((res) => {
        const data = res.data;
        const msg = data.msg;
        this.$message.success({
          message: msg,
          duration: 1500,
        });
      });
    },
    detail(item) {
      this.obj = item;
      this.box = true;
    },
    onRefresh() {
      this.tip = false;
      this.page.page = 1;
      getList(this.page).then((res) => {
        const data = res.data;
        this.page.total = data.total;
        this.list = data.records;
        this.isLoading = false;
        this.finished = false;
        this.onLoad();
      });
    },
    onLoad() {
      this.tip = false;
      getList(this.page).then((res) => {
        this.setPage(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  .textarea {
    border-top: 1px solid #ccc;
  }
  .item {
    $imgWidth: 70px;
    width: 100%;
    margin-bottom: 10px;
    padding: 5px 20px 15px 20px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    .img {
      margin-right: 20px;
      margin-top: 8px;
      width: $imgWidth;
      height: $imgWidth;
      border-radius: 100%;
      border: 1px solid #ccc;
      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .info {
      width: calc(100% - #{$imgWidth} - 16px);
      padding-top: 16px;
      .title {
        margin-bottom: 5px;
        color: #333;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 30px;
        line-height: 30px;
      }
      .text {
        margin-bottom: 12px;
        color: #919191;
        font-size: 14px;
        line-height: 20px;
      }
      .menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        .tip {
          color: #999;
          font-size: 10px;
        }
        .btn {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>

